<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
	<title>账号登录信息资料</title>
    <link href="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<link href="${pageContext.request.contextPath}/css/system/public.css" />	
    <link href="${pageContext.request.contextPath}/css/system/register.css" rel="stylesheet">
    <link href="../favicon.ico" rel="shortcut icon">
</head>
<body class="s_body s_phone_login k_body">
    <div class="s_content">
        <h3>个人资料确认</h3>
        <div class="s_login_box">
            <div style="height:10px;"></div>
            <ul class="s_basics_list">
                <li><span>姓名</span>
                <input id="name" class="col-sm-2 input form-control" style="height:25px;min-height: 30px;    width: 200px;"/>
                <em><font color="red" id="nameErr" style="margin-left:10px"></font></em></li>
         <!--        <li><span>电话</span><p id="mobile">&nbsp;&nbsp;&nbsp;&nbsp; -->
                <li><span>邮件</span>
                <input id="email"class="col-sm-2 input form-control" style="height:25px;min-height: 30px;     width: 200px;" />
                <em><font color="red" id="emailErr" style="margin-left:10px"></font></em>                 
                </li>              
<!--                 <li><span>行业</span><p id="industry"></p></li>
                <li><span>部门</span><p id="department"></p></li>
                <li><span>职位</span><p id="job"></p></li>
                <li><span>角色</span><p id="role"></p></li> -->
                <!--  <div class="interested k_interested">
                  <span>选择或输入您的个人爱好</span>
                  <input type="text" class="addEle" placeholder="自定义" />
                  <span class="alertWord">按Enter键确认，不超过3个。</span>
                </div>
                <ol class="fix k_ol">
                    <li class="s_fx_li1 g_li" tofos="shan"><img src="../sys/register/images/s_check.png" class="s_fk_pic1" _id="1" />宠物</li>
                    <li class="s_fx_li2 g_li" tofos="shan"><img src="../sys/register/images/s_check.png" class="s_fk_pic2" _id="3" />植物</li>
                    <li class="s_fx_li3 g_li" tofos="shan"><img src="../sys/register/images/s_check.png" class="s_fk_pic3" _id="5" />户外</li>
                    <li class="s_fx_li4 g_li" tofos="shan"><img src="../sys/register/images/s_check.png" class="s_fk_pic4" _id="7" />电影</li>
                    <li class="s_fx_li5 g_li" tofos="shan"><img src="../sys/register/images/s_check.png" class="s_fk_pic5" _id="9" />美食</li>
                </ol> -->
            </ul>
            <div style="height:100px;"></div>
            <div class="btnBox">
                <a href="javascript:;" class="s_dl_button">确认</a>
            </div>
        </div>
    </div>
    <div class="s_footer" style="text-align:center;">
        <p>zhfeat</p>
    </div>

   	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript">
         $('.s_fx_li1').click(function(){
          var id = $(this).find('img').attr('_id');
            if(id == 1){
              $('.s_fk_pic1').attr('src', '${pageContext.request.contextPath}/images/system/s_check_no.png');
              $(this).find('img').attr('_id' , '2');
              $(this).attr('tofos' , 'tian');
            }else{
              $('.s_fk_pic1').attr('src', '${pageContext.request.contextPath}/images/system/s_check.png');
              $(this).find('img').attr('_id' , '1');
              $(this).attr('tofos' , 'shan');
            }
        });
        $('.s_fx_li2').click(function(){
          var id = $(this).find('img').attr('_id');
            if(id == 3){
              $('.s_fk_pic2').attr('src', '${pageContext.request.contextPath}/images/system/s_check_no.png');
              $(this).find('img').attr('_id' , '4');
              $(this).attr('tofos' , 'tian');
            }else{
              $('.s_fk_pic2').attr('src', '${pageContext.request.contextPath}/images/system/s_check.png');
              $(this).find('img').attr('_id' , '3');
              $(this).attr('tofos' , 'shan');
            }
        });
        $('.s_fx_li3').click(function(){
          var id = $(this).find('img').attr('_id');
            if(id == 5){
              $('.s_fk_pic3').attr('src', '${pageContext.request.contextPath}/images/system/s_check_no.png');
              $(this).find('img').attr('_id' , '6');
              $(this).attr('tofos' , 'tian');
            }else{
              $('.s_fk_pic3').attr('src', '${pageContext.request.contextPath}/images/system/s_check.png');
              $(this).find('img').attr('_id' , '5');
              $(this).attr('tofos' , 'shan');
            }
        });
        $('.s_fx_li4').click(function(){
          var id = $(this).find('img').attr('_id');
            if(id == 7){
              $('.s_fk_pic4').attr('src', '${pageContext.request.contextPath}/images/system/s_check_no.png');
              $(this).find('img').attr('_id' , '8');
              $(this).attr('tofos' , 'tian');
            }else{
              $('.s_fk_pic4').attr('src', '${pageContext.request.contextPath}/images/system/s_check.png');
              $(this).find('img').attr('_id' , '7');
              $(this).attr('tofos' , 'shan');
            }
        });
        $('.s_fx_li5').click(function(){
          var id = $(this).find('img').attr('_id');
            if(id == 9){
              $('.s_fk_pic5').attr('src', '${pageContext.request.contextPath}/images/system/s_check_no.png');
              $(this).find('img').attr('_id' , '10');
              $(this).attr('tofos' , 'tian');
            }else{
              $('.s_fk_pic5').attr('src', '${pageContext.request.contextPath}/images/system/s_check.png');
              $(this).find('img').attr('_id' , '9');
              $(this).attr('tofos' , 'shan');
            }
        });
    </script>  
    <script type="text/javascript">
    /* LeeX */
    	$(function(){
    		 $.ajax({
                 type: "POST",
                 url: "${pageContext.request.contextPath}/account/ajaxPerInforShow",
                 dataType: "json",
                 data: {},
                 success: function(data){
                	 var realName = data.data;
                	 if(data.status == "200"){
                		 $('#name').val(realName.name);
                		 $('#email').val(realName.email);
                	 }
                 }
    		 });
    	});
    	  $(function(){
              var itemNum = 0;
                    $('.addEle').on('keydown',function(e){
                    var ele = "";
                    if(e.keyCode==13){
                        var con = $.trim($(this).val());
                        if(con==""){
                            $(this).val('');
                            return false;
                        }
                        if(itemNum>=3){
                            alert(itemNum)
                            return false;
                        }
                        itemNum++;
                        if(itemNum==3){
                            $('.addEle').css('visibility','hidden');
                            $('.alertWord').css('visibility','hidden');
                        }
                        ele = '<li class="s_fx_li1 c_li" tofos="tian"><img onclick="change()" src="${pageContext.request.contextPath}/images/system/s_check_no.png" class="c_'+itemNum+'" _id="c_'+itemNum+'" />'+con+' <img class="k_del" src="${pageContext.request.contextPath}/images/system/k_close.png" /></li>';
                        $('.s_login_box ol').append(ele);
                        $(this).val('');
                    }
                });
                $('body').on('click','.k_del',function(){
                    $(this).parent().remove();
                    $('.addEle').css('visibility','visible');
                    $('.alertWord').css('visibility','visible');
                    itemNum--;
                });
            })

            function change(){
    		  var d =  $(event.srcElement).attr('tofos');
    		  if(d == 'tian'){
    			  $(event.srcElement).attr('tofos','shan');
	    		  $(event.srcElement).attr('src','${pageContext.request.contextPath}/images/system/s_check.png');
    		  }else if(d == 'shan'){
    			  $(event.srcElement).attr('tofos','tian');
    			  $(event.srcElement).attr('src','${pageContext.request.contextPath}/images/system/s_check_no.png');
    		  }
    	  }
    $(document).on("click",".s_dl_button",function(){
    	/*window.location.href="${pageContext.request.contextPath}/ui/personalInfor";
    	 var is = $('li[tofos=tian]');
    	var str = '';
    	for(var i = 0 ; i < is.length ; i++){
    		var t = is[i];
    		if(i == is.length-1){
	    		str += $(t).text();
    		}else{
    			var c = $(t).text()+',';
    			str += c;
    		}
    	} */
    	if(!checkName()){
    		checkEmail();
			return;
		}
    	if(!checkEmail()){
    		checkName();
    		return;
    	}
    	
    	var name = $('#name').val();
    	var email = $('#email').val();
    	$.post(
    			'${pageContext.request.contextPath}/account/ajaxPerInforUpdate',
    			{
    				'name':name,
    				'email':email
    			},
    			function(data){
    				//选择所属门店功能屏蔽
    				//if(data.error_code == '70001'){
    				//	window.location.href = "${pageContext.request.contextPath}/ui/perChooseInfo";
    				//}else{
    					if(data.status = '200'){
    					window.location.href="${pageContext.request.contextPath}/view/ui/main";
    					}
    				//}
    	},'json'); 
    });
    </script>   
    <script type="text/javascript">
    	function checkEmail(){
    		//用户输入的邮件
    		var email=$('#email').val();
    		if(email==null || email==""){
    			return true;
    		}
    		//正则表达式
    		var reg=/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
    		//判断
    		 if(!reg.test(email)){
    			 $('#emailErr').text("不符合邮件地址规范");
    		     document.getElementById("email").value="";
    		     return false;
    		}else{
    			$('#emailErr').text("");
    			return true;
    		}
    	}
    	
    	function checkName(){
    		var name = $('#name').val();
    		if(name == null || name == ""){
    			$('#nameErr').text("姓名不能为空");
    			$('#name').focus();
    			return false;
    		}
    		return true;
    	}
    </script>               
</body>
</html>

